<template>
	<view class="container">
		<view class="index-top" :style="{backgroundImage:`url(${indexhomeindex.background_image})`}">
			<!-- 头部导航 -->
			<view class="bg-goods-header">
				<view class="bg-goods-header-left">
					<image :src='imgsrc' mode="widthFix" lazy-load></image>
					<text>渝中区大坪街道</text>
				</view>
				<view class="bg-goods-header-right">
					
				</view>
			</view>
			
			<view class="bgoods-bar">
				<view class="bgoods-bar-left" @click="navToRuter(search_bar.left.route)">
					<image :src="search_bar.left_icon" mode="widthFix" lazy-load v-if="search_bar.left_icon"></image>
				</view>
				
				<!-- 搜索栏 -->
				<view class="bgoods-bar-middle">
					<input placeholder="搜索内容" disabled placeholder-class="icon iconfont icon-sousuo topic-search" @click="searchgoods()"/>
				</view>
				
				<view class="bgoods-bar-right">
					<view class="bgoods-bar-right-view" v-for="(items,index) in search_bar.list" v-if="search_bar.list">
						<image :src="items.path" mode="widthFix" lazy-load @click="navToRuter(items.route)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="top-zhiding"></view>
		
		<view class="uni-tab-bar">
			<!-- 图文列表 -->
			<indexList :item="indexhomeindex"></indexList>
			<!-- 顶部功能区 -->
			<view class="func">
				<view class="func-swiper-bar">
					<swiperTabFunc :functabBars="indexhomeindex.func" :funcIndexbar="funcIndex" @functabtap="functabtap"></swiperTabFunc>
				</view>
				
				<view class="uni-tab-bar">
					<swiper class="swiper-box" :style="{height:funcswiperheight+'px'}" :current="funcIndex" @change="tabChangefunc">
						<swiper-item v-for="(items,index) in indexhomeindex.func" :key="index">
							<scroll-view class="list">
								<view v-if="typeof indexhomeindex.func_goods != 'undefined'">
									<funcIndexList :item="indexhomeindex.func_goods" :index="index"></funcIndexList>
									<!--下拉加载更多-->
									<uni-load-more :status="loadingType"></uni-load-more>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
				
			</view>
		</view>		
		
	</view>
</template>

<script>
	import swiperTabHeader from "@/components/bgoods/swiper-tab-header"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more'
	import apibgoodsindex from '@/common/api/bgoods-index'
	import apiindex from '@/common/api/index'
	import indexList from "@/components/bgoods/index-list" 
	import funcIndexList from "@/components/bgoods/func-index-list"
	import swiperTabFunc from "@/components/bgoods/swiper-tab-func"
	export default {
		data() {
			return {
				imgsrc:"/static/buytao/weizhi.png",
				
				loadingType:'loading',
				swiperheight:300,//高度
				funcswiperheight:300,
				tabIndex:0,// 选中的
				tabBars:[],	
				
				funcIndex:0,//功能区选中的
				funcpage:1,//功能区翻页
				
				search_bar:{},	//头部搜索
				indexhomeindex:{
					background_image:'',
					carousel_background_image:'',
					menu_background_image:'',
					menu:[],		//菜单
					ad:[],			//广告
					ad1:[],			//广告1
					ad2:[],			//广告2
					carousel:[],	//轮播图1
					carousel1:[],	//轮播图2
					func:[],		//功能区
					func_goods:[],	//功能区商品
				},
				
				goods_page:1,
				
				params:{
					site:'haodanku',
					page:this.goods_page,
					coupon:1,
					sort:'desc',
					order_by:'',
					category_id:1,
				},
			}
		},
		components:{
			swiperTabHeader,
			indexList,
			swiperTabFunc,
			funcIndexList,
			uniLoadMore,
		},		
		onShow(){
			this.getlistHeight()
			this.index()	//首页结构()	//首页头部分类
		},
		onNavigationBarSearchInputClicked(){
			//监听搜索框点击事件
			uni.navigateTo({
				url:"/pages/search/search"
			})
		},
		onNavigationBarButtonTap(e){
			// 监听原生标题导航按钮事件
			switch(e.index){
				case 1:
					uni.navigateTo({
						url:"/pages/add-input/add-input"
					})
					break;
			}
		},
		
		methods: {
			
			getlistHeight(){
				let screen = uni.getSystemInfoSync()
				this.swiperheight=screen.screenHeight
			},
			
			
			index(){
				//加载首页结构
				setTimeout(()=>{
					//首页结构
					apibgoodsindex.index({}).then(res => {
						//商品列表
						this.productlist(res.data.func[0].route);
						this.indexhomeindex.background_image=res.data.background_image
						this.indexhomeindex.carousel_background_image = res.data.carousel_background_image
						this.indexhomeindex.menu_background_image = res.data.menu_background_image
						this.indexhomeindex.func=res.data.func;	
						this.search_bar=res.data.search_bar;
						this.indexhomeindex.menu=res.data.menu;
						this.indexhomeindex.ad=res.data.ad;
						this.indexhomeindex.ad1=res.data.ad1;
						this.indexhomeindex.ad2=res.data.ad2;
						this.indexhomeindex.carousel=res.data.carousel;
						this.indexhomeindex.carousel1=res.data.carousel1;
						uni.stopPullDownRefresh();  //停止下拉刷新动画
					}).catch(res => {
					　　// 失败进行的操作
					});
				},2000);
			},
			
			//获取商品列表，功能区的
			productlist(params){
				let productlist_params=JSON.parse(params.data);
				apiindex.productlist(productlist_params).then(prores =>{
					this.indexhomeindex.func_goods=prores.data;
					this.funcswiperheight = prores.data.length*150 +50
				}).catch(prores =>{
					
				});
			},
			
			//路由跳转
			navToRuter(router){
				
			},
			
			//功能区接受子组件传过来的值点击切换导航
			functabtap(index,route){
				if(this.funcIndex != index){
					this.productlist(route);
				}
				this.funcIndex = index;
			},
			
			//滑动切换导航
			tabChangefunc(e){
				this.indexhomeindex.func_goods=[];
				this.funcswiperheight = 150
				this.funcIndex = e.detail.current;
				this.productlist(this.indexhomeindex.func[this.funcIndex].route);
			},
			
			//功能下拉区加载商品
			loadfuncmore(){
				let func_router = this.indexhomeindex.func[this.funcIndex].route
				let params=JSON.parse(func_router.data);
				this.funcpage= this.funcpage+1
				params.page=this.funcpage;
				setTimeout(()=>{
					apiindex.productlist(params).then(prores =>{
						//获取数据
						// for(var i=0;i<prores.data.length;i++){
						// 	this.indexhomeindex.func_goods.push(prores.data[i]);
						// }
						let current_func = prores.data.length * 148
						this.funcswiperheight = this.funcswiperheight+current_func
						this.indexhomeindex.func_goods = this.indexhomeindex.func_goods.concat(prores.data);//合并数组
					}).catch(prores =>{
						
					});
					
				},2000);
			},
			
			
			//商品搜索
			searchgoods(){
				uni.navigateTo({
					url:"/pages/search/index"
				})
			},
			
		},
	}
</script>

<style scoped lang="scss">
	.bg-goods-header{
		width:100%;
		height:80upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding-top:30upx;
		.bg-goods-header-left{
			image{
				width:40upx;
				height:40upx;
				position:relative;
				top:10upx;
				left:5upx;
			}
			text{
				font-size:30upx;
				font-weight:bold;
				display:inline-block;
				line-height:80upx;
				padding-left:10upx;
			}
			width:50%;
		}
		.bg-goods-header-right{
			width:50%;
		}
	}
	.bgoods-bar{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width:100%;
		padding-bottom:20upx;
		.bgoods-bar-left{
			width:16%;
			padding:1% 2% 0 2%;			
			image{
				width:100%;
			}
		}
		.bgoods-bar-middle{
			width:60%;
			input{
				width:100%;
				background-color:#FFFFFF;
				padding:15upx 0;
				border-radius:20upx;
			}
		}
		.bgoods-bar-right{
			width:20%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.bgoods-bar-right-view{
				width:50%;
				image{
					width:100%;
				}
			}
		}
	}
	.index-top{
		/* position: absolute;
		width: 100%;
		left: 0;
		right: 0;
		z-index: 1; */
		position:fixed;
		width: 100%;
		left: 0;
		right: 0;
		z-index:1;
		background-size: 100% 100%;
	}
	.top-zhiding{
		display: block;
		height:200upx;
	}
	.index-left-icon{
		width:20%;
		margin-left:10upx;
	}
	.index-left-icon>image{
		width:120upx;
		height:50upx;
		position:relative;
		top:10upx;
	}
	.index-right-icon{
		width:20%;
	}
	.index-right-icon>image{
		margin-right:20upx;
		width: 70upx;
		height:70upx;
		position:relative;
		top:10upx;
	}
	
	
	.search-input{
		padding: 20upx;
	}
	.search-input input{
		background: #F4F4F4;
		border-radius: 10upx;
	}
	.topic-search{
		display: flex;
		justify-content: center;
		font-size: 27upx;
	}
</style>
